<template>
<div>
	<!--背景图片-->
	<img :src="background" style="width: 100%;max-height: 90%;object-fit: cover;"  alt/>
	<!--注册表单-->
	<el-form v-model="registerInfo" class="registerForm"  size="medium">
		<h2 style="text-align: center;margin-bottom: 50px;font-size: 30px;">注册账号</h2>
		<el-form-item >
			<input  v-model="registerInfo.username" class="input-text" autofocus placeholder="请输入用户名(长度 3~8位)" autocomplete="off"></input>
		</el-form-item>
		<el-form-item >
			<input type="password" show-password="true" v-model="registerInfo.password" class="input-text" placeholder="请输入密码(长度 6~16位)" autocomplete="off"></input>
		</el-form-item>
		<el-form-item >
			<input type="password" show-password="true" v-model="registerInfo.confirmPassword" class="input-text" placeholder="请再次输入密码" autocomplete="off"></input>
		</el-form-item>
		<el-form-item >
			<input type="text" oninput="value=value.replace(/[^\d]/g,'')" v-model="registerInfo.phone" class="input-text" placeholder="请输入手机号码" autocomplete="off"></input>
		</el-form-item>
		<el-form--item>
			<input type="text" maxlength="6" v-model="registerInfo.verifyCode" class="input-text" style="width: 200px;font-size: 20px;" placeholder="请输入验证码"/>
			<el-button style="height: 70px;width: 150px;font-size: 18px;" @click="handlerGetRegisterVerifyCode">获取验证码</el-button>
		</el-form--item>
		<!--<el-form-item class="radio-sex">
				<input name="sex" type="radio" v-model="registerInfo.sex" value="男"/><span>男</span>
				<input name="sex" type="radio" v-model="registerInfo.sex" value="女"/><span>女</span>
		</el-form-item>-->
		<el-form-item style="margin-top: 20px;text-align: center;">
			<el-button type="primary" @click="handlerRegister" class="button-register">注册</el-button>
		</el-form-item>
		<div style="float: right;margin: 0 30px;font-size: 16px;">已有账号?<span @click="handlerToLogin" style="color:#1368F7;cursor: pointer;">去登录</span></div>
	</el-form>
</div>
</template>

<script>
	export default{
		name:'register',
		data(){
			return{
				registerInfo:{
					username:'',
					password:'',
					confirmPassword:'',
					phone:'',
					sex:'男',
				},
				verifyCode:'',
				background:require("@/assets/login-background.png"),
			}
		},
		methods:{
			handlerToLogin(){
				this.$router.push({
					name:'login'
				})
			},
			handlerGetRegisterVerifyCode(){
				if(this.registerInfo.phone.length!==11){
					this.$message.error('手机号码格式错误!')
					return;
				}
				this.$axios({
					method:'POST',
					url:'user/getRegisterVerifyCode',
					params:{
						phone:this.registerInfo.phone
					}
				}).then(
					response=>{
						if(response.data.success){
							this.$message.success("验证码已经发送,请注意查收!");
						}else{
							//this.$message.error(response.data.message)
						}
					}
				)
			},
			handlerRegister(){
				if(this.registerInfo.username.length<3||this.registerInfo.length>10){
					this.$message.error('用户名长度在  3~10  位之间')
					return;
				}
				if(this.registerInfo.password.length<6||this.registerInfo.password.length>16){
					this.$message.error('密码长度在  6~16  位之间')
					return;
				}
				if(this.registerInfo.password!==this.registerInfo.confirmPassword){
					this.$message.error('两次密码输入不一致')
					return;
				}
				if(this.registerInfo.phone.length!==11){
					this.$message.error('手机号码格式错误!')
					return;
				}
				if(this.registerInfo.verifyCode.length!==6){
					this.$message.error('请输入验证码 6位')
					return;
				}
				this.$axios({
					method:'POST',
					url:'user/register/',
					data:this.registerInfo
				}).then(
					response=>{
						if(response.data.success){
					this.$confirm('注册成功!现在是否去登录？','提示',{
						confirmButtonText:'确定',
						concelButtonText:'取消',
						type:'warning'
						}).then(
							()=>{
								this.$router.push({
									name:'login'
								})
							}).catch(
							()=>{
							}
				);		
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			}
		}
	}
</script>

<style scoped>
	.registerForm{
		margin: 20px auto;
		width: 550px;
		height: 750px;
		border: 1px solid gainsboro;
		padding: 40px 30px;
		position: absolute;
		right: 15%;
		top: 10%;
		background: white;
	}
	.input-text{
		width: 440px;
		height: 64px;
		line-height: 64px;
		font-size: 20px;
		padding: 0 20px;
		margin: 20px 30px 0 30px;
		
	}
	.radio-sex{
		margin:30px 0 0 35%;
	}
	.radio-sex input{
		margin-right: 10px;
		width: 20px;
		height: 20px;
	}
	.radio-sex span{
		margin-right: 50px;
		font-size: 16px;
	}
	.button-register{
		width: 350px;
		height: 60px;
		font-size: 26px;
		margin: 15px 0 0 0;
	}
</style>